<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百年建党，青春献礼</title>
    <link rel="stylesheet" href="./css/restcss2011.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./fontawesome/css/all.css">
    <link rel="stylesheet" href="./css/index1.css">
    <script src="./js/index.js"></script>
    <script src="./js/animate.js"></script>
    <!-- 网站的图标在标题栏和收藏栏显示
    网站图标一边存在网站的根目录下 ，名字一边叫favicon.ico-->
    <link rel="icon" href="1.jpg">
</head>

<body>
    <!-- <audio src="./source/我和我的祖国-华语群星-61274940.mp3" ></audio> -->
    <!-- 外部顶部容器 -->
    <div class="topbar-wrapper">
        <!-- 创建内部容器 -->
        <div class="topbar w clearfix">


            <ul class="user-info">
                <!-- 滚动字幕、 -->
                <div class="run-wrapper ">
                    <div class="run">
                        <marquee behavior="" direction="">百年建党，青春献礼！奋发图强，自强不息！</marquee>
                    </div>
                </div>

                <li class="line">|</li>
                <li>
                    <a class="app" href="#">
                        主办方
                        <!-- 添加弹出层 -->
                        <div class="grcode">
                            <img src="./img/code.png" alt="图片加载失败">
                            <span>手机扫一扫</span>
                        </div>
                    </a>
                </li>
                <li class="line">|</li>
                <li><a href="team.html">制作团队
                        <i class="fas fa-angle-right">
                        </i>
                        <i class="fas fa-angle-right"></i>
                    </a></li>
                <li class="line">|</li>
            </ul>
        </div>
    </div>

    <!-- 创建一个头部的外部容器 -->
    <div class="header-wrapper">
        <div class="header w clearfix">
            <!-- 创建一个logo -->
            <h1 class="logo" title="五星">
                五星红旗
                <a class="star" href="/"></a>

            </h1>

            <!-- 创建一个中间导航条容器-->
            <div class="nav-wrapper">
                <!-- 创建导航条 -->
                <ul class="nav clearfix">

                    <li class="show-goods"><a href="#">首页</a></li>

                    <li class="show-goods"><a href="#">学党史</a>
                       
                    </li>
                    <li class="show-goods"><a href="#">2021全国两会</a>
                 
                    </li>
                    <li class="show-goods"><a href="#">缅怀先烈</a>
                     
                    </li>
                    <li class="show-goods"><a href="#">新征程</a>
                     
                    </li>
                    <li class="show-goods"><a href="#">感受</a>
                       
                    </li>

                </ul>
            </div>

            <!-- 创建右上搜索框容器 -->
            <div class="search-wrapper">
                <form class="search" action="#">
                    <input class="search-inp" type="text">
                    <button class="search-btn">
                        <i class="fas fa-search"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- 创建轮播图容器 -->
    <div class="w">
        <div class="main">
            <div class="focus">
                <ul>
                    <li>
                        <a href="">
                            <img src="./img/lunboimg/lunbo1.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="./img/lunboimg/lunbo2.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="./img/lunboimg/lunbo3.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="./img/lunboimg/lunbo4.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="./img/lunboimg/guoqi.jpg" alt="">
                        </a>
                    </li>
                </ul>
                <!-- 小圆圈 -->
                <ol class="circle">

                </ol>
                <!-- 左侧按钮 -->
                <a href="javascript:;" class="arrow-l"></a>
                <!-- 右侧按钮 -->
                <a href="javascript:;" class="arrow-r"></a>
            </div>
        </div>
    </div>




    <!-- 固定定位的工具条 -->
    <div class="back-top">
        <a href="index.html">
            
           回到顶部
            </a>
    </div>

    <!-- 创建轮播图下面新闻容器 -->
    <div class="ad w">
        <ul class="shortcut">
            <li>
                <a href="#">
                    <i class="fas fa-clock"></i>
                    百年建党</a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-building"></i>
                    房屋建设</a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-frog"></i>
                    环境建设</a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-robot"></i>
                    智能创新</a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-keyboard"></i>
                    乡村振兴</a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-sim-card"></i>
                    通信</a>
            </li>
           
        </ul>


        <ul class="imgs">
            <li>
                <a href="./0imglist.html">
                    <img src="./img/start.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/start.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/favcon.jpg" alt="">
                </a>
            </li>
        </ul>
    </div>

    <!-- 创建下部块级新闻 -->

    <div class="last w ">
        <div class="outer-wrapper ">
            <div class="outer">
                <!-- 创建图片容器 -->
                <div class="img-wrapper">
                    <img src="./img/jiandang.jpg" alt="">
                </div>
                <!-- 创建内容容器 -->
                <div class="info">
                    <h2 class="title">
                        建档伟业
                    </h2>
                    <h3 class="category">
                        <i class="fas fa-map-marker-alt"></i>
                        上海
                    </h3>
                    <p class="intro">
                        中国共产党成立于1921年7月23日，在上海、浙江嘉兴南湖的一艘小船上...
                    </p>
                </div>
                <!-- 创建评分 -->
                <div class="star-wrapper">
                    <!-- 创建星星 -->
                    <ul class="star">
                        <li class="fas fa-star light"></li>
                        <li class="fas fa-star light"></li>
                        <li class="fas fa-star linght"></li>
                        <li class="fas fa-star"></li>
                    </ul>

                    <!-- 创建分享图标 -->
                    <ul class="weibo">
                        <li class="fab fa-weibo"></li>
                    </ul>
                </div>

            </div>
        </div>


        <div class="outer-wrapper2 ">
            <div class="outer2">
                <!-- 创建图片容器 -->
                <div class="img-wrapper2">
                    <img src="./img/janjun.jpg" alt="">
                </div>
                <!-- 创建内容容器 -->
                <div class="info2">
                    <h2 class="title2">
                       建军大业
                    </h2>
                    <h3 class="category2">
                        <i class="fas fa-map-marker-alt"></i>
                        湖南、南昌
                    </h3>
                    <p class="intro2">
                        1927年，北伐战争刚取得重大成果之际，国民党“右派”为夺权叛变革命，毛泽东、周恩来等党内进步分子冒着生命危险分赴湖南和南昌等地，联合朱德、贺龙、叶挺、刘伯承等一批爱国将领发动起义，誓要组建一支真正属于人民的军队。
                    </p>
                </div>
                <!-- 创建评分 -->
                <div class="star-wrapper2">
                    <!-- 创建星星 -->
                    <ul class="star2">
                        <li class="fas fa-star light"></li>
                        <li class="fas fa-star light"></li>
                        <li class="fas fa-star linght"></li>
                        <li class="fas fa-star linght"></li>
                    </ul>

                    <!-- 创建分享图标 -->
                    <ul class="weibo2">
                        <li class="fab fa-weibo"></li>
                    </ul>
                </div>

            </div>
        </div>


        <div class="outer-wrapper3 ">
            <div class="outer3">
                <!-- 创建图片容器 -->
                <div class="img-wrapper3">
                    <img src="./img/jianguo.jpg" alt="">
                </div>
                <!-- 创建内容容器 -->
                <div class="info3">
                    <h2 class="title3">
                       建国大业
                    </h2>
                    <h3 class="category3">
                        <i class="fas fa-map-marker-alt"></i>
                        北京
                    </h3>
                    <p class="intro3">
                       “中国人民从此站起来了”
                    </p>
                </div>
                <!-- 创建评分 -->
                <div class="star-wrapper3">
                    <!-- 创建星星 -->
                    <ul class="star3">
                        <li class="fas fa-star light"></li>
                        <li class="fas fa-star light"></li>
                        <li class="fas fa-star linght"></li>
                        <li class="fas fa-star linght"></li>
                    </ul>

                    <!-- 创建分享图标 -->
                    <ul class="weibo3">
                        <li class="fab fa-weibo"></li>
                    </ul>
                </div>

            </div>
        </div>

        
        <div class="outer-wrapper4 ">
            <div class="outer4">
                <!-- 创建图片容器 -->
                <div class="img-wrapper4">
                    <img src="./img/pzh.jpg" alt="">
                </div>
                <!-- 创建内容容器 -->
                <div class="info4">
                    <h2 class="title4">
                        三线建设
                    </h2>
                    <h3 class="category4">
                        <i class="fas fa-map-marker-alt"></i>
                        攀枝花
                    </h3>
                    <p class="intro4">
                        百年风雨，攀枝花的改变
                    </p>
                </div>
                <!-- 创建评分 -->
                <div class="star-wrapper4">
                    <!-- 创建星星 -->
                    <ul class="star4">
                        <li class="fas fa-star light"></li>
                        <li class="fas fa-star light"></li>
                        <li class="fas fa-star linght"></li>
                        <li class="fas fa-star linght"></li>
                    </ul>

                    <!-- 创建分享图标 -->
                    <ul class="weibo4">
                        <li class="fab fa-weibo"></li>
                    </ul>
                </div>

            </div>
        </div>

    </div>
</body>

</html>